<template>
	<view class="page">
		<view class="wrapper">
			<view class="card" @click="share">
				<image class="img" src="../../static/images/card1.png" mode="aspectFit"></image>
			</view>

			<view class="grids-box">
				<uni-grid :column="5" :showBorder="false">
					<uni-grid-item v-for="(i, k) in grids" :key="k" class="grid">
						<image :src="i.icon" class="icon" @click="goto(i.path)"></image>
						<p class="text" @click="goto(i.path)">{{i.text}}</p>
					</uni-grid-item>
				</uni-grid>
			</view>

			<view class="block-title active">
				<view class="title">
					热门推荐
				</view>
			</view>

			<view class="card card2">
				<view class="title">
					站内交易 一键PUSH
				</view>
				<view class="text">
					你的收益 你决定
				</view>
			</view>
		</view>
		
		<view class="my-tab">
			<wuc-tab textFlex :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange" selectClass="text-active"></wuc-tab>
			<view class="blank" style="height: 20rpx;"></view>
			<swiper :current="TabCur" duration="300" @change="swiperChange">
				<swiper-item v-for="(item,index) in tabList" :key="index">
					<view class="card card2">
						<view class="title">
							站内交易 一键PUSH
						</view>
						<view class="text">
							你的收益 你决定
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 分享图片 -->
		<view class="cu-modal" :class="modalName=='shareModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog">
				<view class="bg-img" :style="'background-image:url(' + shareImg + ');height: 60vh;background-size: contain;'">
					<view class="cu-bar justify-end text-white">
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close "></text>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="download">保存到本地</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				downloadurl: '',
				modalName: '',
				shareImg: '',
				grids: [{
						icon: require('../../static/images/home1.png'),
						text: '幸运大转盘',
						path: '/pages/home/draw'
					},
					{
						icon: require('../../static/images/home2.png'),
						text: '领取奖励',
						path: '/pages/mine/award'
					},
					{
						icon: require('../../static/images/home3.png'),
						text: '每日签到',
						path: ''
					},
					{
						icon: require('../../static/images/home4.png'),
						text: '积分商城',
						path: '/pages/shop/shop'
					},
					{
						icon: require('../../static/images/home5.png'),
						text: '质押挖矿',
						path: '/pages/pledge/index'
					}
				],
				TabCur: 0,
				tabList: [{
					name: '全部'
				}, {
					name: '游戏'
				}, {
					name: '交易所'
				}, {
					name: '直播'
				}],
			};
		},
		onShow() {
			
		},
		methods: {
			showShareModal(e) {
				this.modalName = 'shareModal'
			},
			hideModal(e) {
				this.modalName = null
			},share() {
				this.$u.get('/member/share').then(res => {
					console.log(res.data.result.share)
					this.shareImg = res.data.result.share
					this.downloadurl = res.data.result.download
					this.showShareModal();
				})
			},
			download() {
				// #ifdef H5
				console.log('h5')
				window.open(`https://supercloud.qidka.com/api/member/img/download?file_path=${this.downloadurl}`)
				// #endif
				
				// #ifndef H5
				console.log('not h5')
				uni.downloadFile({
					url: this.shareImg,
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.showToast({
									"title":"保存成功",
									duration:2000
								})
							},
							fail: res => {
								console.log(res)
							}
						})
					}
				})
				// #endif
			},
			tabChange(index) {
				this.TabCur = index;
			},
			swiperChange(e) {
				let { current } = e.target;
				this.TabCur = current;
			},
			goto(path) {
				if (path) {
					uni.navigateTo({
						url: path,
						animationType: 'slide-in-right',
						animationDuration: 300
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '暂未开放，敬请期待。'
					})
				}
			}
		}
	};
</script>

<style>
	.card {
		width: 100%;
		height: 300rpx;
	}

	.card .img {
		width: 100%;
		height: 100%;
	}

	.card2 {
		margin: 20rpx 0;
		height: 210rpx;
		background: url(../../static/images/card2.png);
		background-size: cover;
		color: #fff;
		letter-spacing: 2rpx;
		padding: 50rpx;
		box-sizing: border-box;
	}

	.card2 .title {
		font-size: 36rpx;
	}

	.card2 .text {
		margin: 16rpx 0 0 6rpx;
	}

	.grids-box {
		margin-top: 40rpx;
		background: #272A33;
		padding: 20rpx;
		border-radius: 10rpx;
		color: #B8B8BF;
		font-size: 20rpx;
	}

	.grid .icon {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx auto 20rpx;
	}

	.grid .text {
		text-align: center;
	}
	
	.my-tab {
		background: #373946;
		padding: 30rpx;
		color: #B8B8BF;
		font-size: 30rpx;
	}
</style>
